<template>
    <div class="thread-container">
        <header>时间线</header>
        <div class="thread-graph">
            <div id="thread-wrapper"></div>
        </div>
    </div>
</template>

<script>
    import graph from '../../../assets/js/chart.js';

    export default {
        name: 'Thread',
        data() {
            return {
                timer: '',
            };
        },
        methods: {
            loadChartData(chart) {
                this.$store.dispatch('thread/loadThreads', this.$route.params.id).then(() => {
                    chart.changeData(this.$store.state.thread.threads);
                });
            },
        },
        mounted() {
            // 1. 绘制时间线图.
            const chart = graph.drawTimelineChart({ container: 'thread-wrapper' });

            // 2. 载入数据.
            this.loadChartData(chart);

            // 3. 设定定时器.
            this.timer = window.setInterval(() => {
                this.loadChartData(chart);
            }, 10_000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.$store.commit('thread/clearData');
        },
    };
</script>

<style lang="scss" scoped>
    .thread-container {
        padding: 0 24px;
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);

        header {
            padding: 16px 0;
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, .85);
            border-bottom: 1px solid #D9E1E8;
        }
    }
</style>
